<template>
  <view class="root">
    <view class="header bgc-fff br-20">
      <label class="fs-28">
        <text class="color-7c838d">提现到</text>
        <picker
          mode="selector"
          :value="value"
          :range="tixian"
          @change="tx"
          range-key="name"
        >
          <text class="color-1c9dff ml-12">{{ card }}</text>
        </picker>
        <!-- <text class="color-1c9dff ml-12">{{ bankCard }}</text> -->
      </label>

      <label class="amount">
        <text class="fs-72 color-121922">¥</text>
        <input
          class="f1 input pl-30 pr-30 color-121922 fs-72"
          type="number"
          placeholder="输入提现金额"
          placeholder-class="fs-32 color-999"
          v-model="amount"
        />
      </label>

      <view class="fd-row fs-28 jc-sb">
        <text class="color-7c838d">账户余额：￥{{ balance }}</text>
        <text @click="toLogs" class="color-1c9dff">提现记录</text>
      </view>
    </view>

    <button
      hover-class="tap-hover"
      class="btn-submit lh-100 br-48 color-fff fs-32"
      @click="withdraw"
    >
      提现
    </button>

    <view id="logs">
      <label
        v-for="(log, index) in withdrawalLogs.list"
        :key="index"
        class="bb-e4e4ee jc-sb ml-30 mr-30 pt-30 pb-30"
      >
        <text class="color-121922">
          <text class="fs-30">¥</text>
          <text class="fs-40">{{ log.money }}</text>
        </text>
        <view class="fs-28 color-7c838d lh-2">
          <text>{{ log.add_time }}</text>
          <text class="text-right color-1c9dff">{{ log.result }}</text>
        </view>
      </label>

      <uni-load-more :status="loadStatus" :contentText="loadContentText" />
    </view>
  </view>
</template>

<script lang="ts">
import { Pager } from "@/common/type";
import Vue from "vue";
import Component from "vue-class-component";
import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
let requestFlag: boolean = false;

@Component({ components: { uniLoadMore } })
export default class withdrawal extends Vue {
  // component property
  balance: string = "0.00";
  bankCard: string = "--";
  loadStatus: string = "loading";
  amount: number | string = "";
  tixian = [
    { type: 2, name: "零钱" },
    { type: 1, name: "银行卡" },
  ];
  type = "";
  value = 0;
  card = "";
  loadContentText: AnyObject = {
    contentdown: "上拉显示更多",
    contentrefresh: "正在加载...",
    contentnomore: "暂无更多记录",
  };
  withdrawalLogs: Pager<AnyObject> = {
    list: [],
    page: 1,
  };
  onShow() {
    this.getData();
    const value = 0;
    this.card = this.tixian[value].name;
    this.type = this.tixian[value].type + "";
  }
  tx(e: AnyObject) {
    console.log(e);
    const value = e.target.value;
    this.card = this.tixian[value].name;
    this.type = this.tixian[value].type + "";
    console.log(this.type);
  }
  onReachBottom() {
    this.getData();
  }

  getData() {
    if (requestFlag || !this.withdrawalLogs.page) return;
    this.loadStatus = "loading";
    requestFlag = true;

    this.request
      .get("/employee/tixians", { page: this.withdrawalLogs.page })
      .then(({ data }) => {
        data.balance && (this.balance = data.balance);
        data.bank_card && (this.bankCard = data.bank_card);

        this.withdrawalLogs.page = +data.page;
        this.withdrawalLogs.list.push(...data.list);
        this.loadStatus = +data.page ? "more" : "noMore";
      })
      .catch(({ code, msg: content }) => {
        // if (code === 2) {
        // 	uni.showModal({
        // 		title: "提示",
        // 		content,
        // 		confirmText: "去绑定",
        // 		success: ({ cancel, confirm }) => {
        // 			cancel && uni.navigateBack({});
        // 			confirm &&
        // 				uni.navigateTo({ url: "/pages/income/bankCard" });
        // 		},
        // 	});
        // }
        this.loadStatus = "noMore";
      })
      .finally(() => {
        requestFlag = false;
      });
  }
  onNavigationBarButtonTap(e: AnyObject) {
    if (e.float !== "right") return;
    uni.navigateTo({ url: "/pages/income/bankCard" });
  }
  toLogs() {
    uni
      .createSelectorQuery()
      .in(this)
      .select("#logs")
      .boundingClientRect(({ top: scrollTop }) => {
        uni.pageScrollTo({
          scrollTop,
          duration: 200,
          selector: "#logs",
        });
      })
      .exec();
  }

  withdraw() {
    this.request
      .get("/employee/tixiansHandle", {
        total_fee: this.amount,
        type: this.type,
      })
      .then(({ msg: title, data }) => {
        uni.showToast({ title });
        this.amount = "";
        this.balance = data.balance;
        this.withdrawalLogs = { list: [], page: 1 };
        this.getData();
      });
  }
}
</script>

<style lang="scss" scoped>
// scss
.root {
  .header {
    margin: 30rpx;
    padding: 40rpx;
    box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
    .amount {
      margin: 30rpx 0 70rpx;
      padding: 30rpx 0;
      border-bottom: 1rpx solid #e4e4ee;
    }
  }

  .btn-submit {
    margin: 30rpx;
    background: linear-gradient(-90deg, #1ba0ff, #2857ff);
  }

  .bb-e4e4ee {
    border-bottom: 1rpx solid #e4e4ee;
  }
}
</style>